<template>
<!--  预定酒店页面      -->
    <div>
        <el-card style="height: 800px">
            <h4 align="left">预定房间</h4>
            <div align="center">
                <!--分割线-->
                <el-divider></el-divider>
                <!--分割线-->
                <div  style="width:500px">
                    <el-form ref="form" :model="form" :rules="rules" label-width="150px" >
                        <el-form-item label="入住时间" prop="checkinDate" :span="11">

                            <el-date-picker type="date" default-time="14:00:00" value-format="yyyy-MM-dd HH:mm:ss"
                                            v-model="form.checkinDate" placeholder="选择入住日期"  style="width: 50%;">
                            </el-date-picker>

                        </el-form-item>

                        <el-form-item label="退房时间" prop="checkoutDate" :span="11">
                            <el-date-picker type="date" default-time="13:00:00" value-format="yyyy-MM-dd HH:mm:ss" v-model="form.checkoutDate" placeholder="选择退房日期"  style="width: 50%;"></el-date-picker>
                        </el-form-item>


                        <el-form-item label="房间选择" prop="roomTypeId">
                            <el-select v-model="form.roomTypeId" placeholder="请选择房型">
                                <el-option v-for="c in dropDownList" :label="c.roomTypeName" :value="c.id"></el-option>
<!--                                <el-option label="标准单间" value="1"></el-option>-->
<!--                                <el-option label="商务双人间" value="5"></el-option>-->
<!--                                <el-option label="豪华三人大房" value="9"></el-option>-->
                            </el-select>
                        </el-form-item>

                        <el-form-item label="联络人手机号" prop="contactTel">
                            <el-input v-model="form.contactTel"></el-input>
                        </el-form-item>

                        <el-form-item label="联络人性别"  prop="gender">
                            <el-radio-group v-model="form.gender" >
                                <el-radio label="男" ></el-radio>
                                <el-radio label="女" ></el-radio>
                            </el-radio-group>
                        </el-form-item>

                        <el-form-item label="联络人姓名" prop="contactName">
                            <el-input v-model="form.contactName"></el-input>
                        </el-form-item>

                        <el-form-item label="随行人数" prop="visNum">
                            <el-input v-model="form.visNum"></el-input>
                        </el-form-item>

                        <el-form-item label="特别备注" prop="note">
                            <el-input type="textarea" v-model="form.note"></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="goon"@click="onSubmit('form')">立即预定</el-button>
                            <el-button>取消</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                unLogin:true,
                dropDownList:[],
                form:{
                    checkinDate:'',
                    checkoutDate:'',
                    roomTypeId:'',
                    contactTel:'',
                    gender:'',
                    contactName:'',
                    visNum:'',
                    note:''
                },
                rules: {
                    checkinDate: [
                        {required: true, message: '请选择入住时间', trigger: 'blur'},
                        // {pattern: /^(\d{4})-(\d{2})-(\d{2})$/, message: '日期格式不正确', trigger: 'blur'},
                        {validator: this.checkCIDate, trigger: 'blur'}
                    ],
                    checkoutDate: [
                        {required: true, message: '请选择退房时间', trigger: 'blur'},
                        {validator: this.checkCODate, trigger: 'blur'}
                    ],
                    roomTypeId: [
                        {required: true, message: '请选择房间类型', trigger: 'blur'},
                        {min: 0, max: 1, message: '请选择正确的房间类型', trigger: 'blur'}
                    ],
                    contactTel: [
                        {required: true, message: '请输入联系人手机', trigger: 'blur'},
                        {pattern: /^1(3\d|4[579]|5[0-35-9]|6[56]|7[01345-8]|8\d|9[189])\d{8}$/, message: '请输入正确的11位手机号', trigger: 'blur'}
                    ],
                    gender: [
                        {required: true, message: '请选择联系人性别', trigger: 'blur'},
                        {pattern: /^[男女]{1}$/, message: '男/女', trigger: 'blur'}
                    ],
                    contactName: [
                        {required: true, message: '请选择联系人姓名', trigger: 'blur'},
                        {min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur'}
                    ],
                    visNum: [
                        {required: false, message: '请选择随行人数', trigger: 'blur'},
                        {pattern: /^[0-5]{1}$/, message: '必须是 0~5 之间的数字', trigger: 'blur'}
                    ],
                    note: [
                        {required: false, message: '请输入特别备注', trigger: 'blur'},
                        {min: 2, max: 50, message: '长度在 0 到 50 个字符', trigger: 'blur'}
                    ]
                }
            };
        },
        methods: {
            loadCustomerInfo(){
                console.log("loadCustomerInfo....");
                let url='http://localhost:9080/customercenter/info';
                console.log('url='+url);
                this.axios.get(url).then((response)=>{
                    let responseBody=response.data;
                    if(responseBody.state==20000){
                        this.user=responseBody.data;
                    }
                });
            },
            onSubmit() {
                console.log("提交订单onSubmit....");
                let url='http://localhost:9080/orders/add-new'
                let formDataV=this.qs.stringify(this.form);
                console.log("formDataV提交信息:"+formDataV);
                this.axios.post(url,formDataV).then((response)=> {
                    let responseBody=response.data;
                    console.log("state:"+responseBody.state);
                    console.log("message:"+responseBody.message);
                    if(responseBody.state==20000){
                        this.$confirm('恭喜您,预定成功!', '你需要:', {
                            confirmButtonText: '查看订单',
                            cancelButtonText: '继续预定',
                            type: 'success'
                        }).then(() => {
                            location.href="/customer/orders";
                        }).catch(() => {
                            console.log("继续预定");
                            location.reload();
                        });

                    }else {
                        this.$alert(responseBody.message, '抱歉!', {
                            confirmButtonText: '确定',
                            callback: action => {
                            }
                        });
                    }
                });
            },
            checkCIDate(rule, value, callback) {
                if (new Date(value).getDay() < new Date().getDay()) {
                    callback(new Error('输入日期必须晚于当前日期'));
                } else if (new Date(value).getDate() > new Date().getDate()+15) {
                    callback(new Error('只能预定未来15天内的房间'));
                }else {
                    callback();
                }
            },
            checkCODate(rule, value, callback) {
                if (new Date(value).getDay() < new Date().getDay()) {
                    callback(new Error('输入日期必须晚于当前日期'));
                }else if (new Date(value).getDate() <= new Date(this.form.checkinDate).getDate()) {
                    callback(new Error('退房日期必须晚于入住日期'));
                }else if (new Date(value).getDate() > new Date().getDate()+15) {
                    callback(new Error('只能预定未来15天内的房间'));
                }else {
                    callback();
                }
            },

        },
        created() {
            console.log('获得已生效的房型数据...');
            let url = "http://localhost:9080/roomType/dropdown-list";

            this.axios.get(url).then((response)=>{
                let responseBody =response.data;
                this.dropDownList = responseBody.data;
                console.log('房型数据:'+responseBody.data);
            });

        },
        mounted() {
            console.log("mounted开始请求数据");

        }
    }
</script>
